<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>管理员列表</span>
            </div>
            <div class="my-3">
                <el-button type="success" @click="dialogVisible = true"><i class="el-icon-plus"></i>添加管理员</el-button>
            </div>

            <el-table
                border
                :data="form"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="id"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="用户名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="mobile"
                    label="手机号/登录账号"
                    width="180">
                </el-table-column>
                <el-table-column
                    #default="{row:admin}"
                    label="拥有角色">
                    <el-tag
                        v-for="item in admin.roles"
                        :key="item.name"
                        size="small"
                        type="success"
                        effect="dark">
                        {{ item.title }}
                    </el-tag>
                </el-table-column>
                <el-table-column
                    label="操作"
                    #default="{row:admin}">
                    <el-button-group>
                        <el-button type="danger" size="mini" @click="del(admin)">删除</el-button>
                        <el-button type="primary" size="mini" @click="edit(admin)">编辑
                        </el-button>
                        <el-button type="success" size="mini" @click="editRole(admin)">设置角色
                        </el-button>
                    </el-button-group>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
            title="添加管理员"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose"
        >
            <!--            弹出-->
            <el-form ref="form" :model="data" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="data.name"></el-input>
                    <hd-error name="name"></hd-error>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="data.mobile"></el-input>
                    <hd-error name="mobile"></hd-error>

                </el-form-item>
                <el-form-item label="登录密码">
                    <el-input v-model="data.password"></el-input>
                    <hd-error name="password"></hd-error>

                </el-form-item>
                <el-button type="primary" size="small" @click="onSubmit">保存提交</el-button>

            </el-form>
            <span slot="footer" class="dialog-footer"> </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    route: {name: 'admin.admin.index', meta: {title: '管理员列表'}},
    data() {
        return {
            form: [],
            data: {},
            dialogVisible: false,
        }
    },
    async created() {
        this.form = await this.axios.get('admin/admin');
    },
    methods: {
        async onSubmit() {
            await this.axios.post('admin/admin', this.data)
        },
        async del(admin) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await this.axios.delete(`admin/admin/${admin.id}`)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            this.form.splice(this.form.indexOf(admin), 1)
        },
        edit(admin) {
            this.$router.push({name: 'admin.admin.edit', params: {id: admin.id}})
        },
        async editRole(admin) {
            this.$router.push({name: 'admin.admin.role', params: {aid: admin.id}})
        },
        handleClose() {
            this.data = {}
            this.dialogVisible = false;
        }
    }
}
</script>

<style scoped>

</style>
